<!--图片放大镜组件-->
<template>
  <div
    v-magnifyDriective
    class="magnify-outer"
    :style="{ width: width + 'px', height: height + 'px' }"
  >
    <!-- 封面图 -->
    <img class="img_cover" :src="imgUrl" />

    <!-- 放大镜部分 -->
    <div
      class="mag-inner"
      :style="{ width: magWidth + 'px', height: magHeight + 'px' }"
    >
      <img
        class="mag-img"
        :style="{ width: width + 'px', height: height + 'px' }"
        :src="imgUrl"
      />
    </div>
  </div>
</template>

<script>
//引入自定义指令
import { magnifyDriective } from "../../directives";
export default {
  name: "magnify",
  directives: {
    magnifyDriective,
  },
  props: {
    //图片地址
    imgUrl: {
      type: String,
    },
    //组件宽度
    width: {
      type: Number,
      default: 375,
    },
    //组件高度
    height: {
      type: Number,
      default: 440,
    },

    //放大镜宽度
    magWidth: {
      type: Number,
      default: 150,
    },

    //放大镜高度
    magHeight: {
      type: Number,
      default: 150,
    },
  },
};
</script>

<style lang="scss" scoped>
.magnify-outer {
  position: relative;

  .img_cover {
    width: 100%;
    height: 100%;
  }

  .mag-inner {
    //初始是不显示
    display: none;
    position: absolute;
    z-index: 2;
    left: 0;
    overflow: hidden;
    top: 0;
    cursor: move;
    overflow: hidden;
    box-shadow: 0 0 3px #999;
    border-radius: 50%;

    &.show {
      display: block;
      transform: scale(1.5);
    }

    .mag-img {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
